import React from 'react';
import { connect } from 'dva';
import { formatMessage } from 'umi/locale';
import { Input, Modal, Form, Row, Col, Button } from 'antd';

const FormItem = Form.Item;
const { TextArea } = Input;

const ViewPropertyForm = Form.create()(props => {
  const { modalVisible, form, handleModalVisible, propertyInfo } = props;
  console.log(propertyInfo);
  return (
    <Modal
      title={formatMessage({ id: 'app.mm.productmodel.property.view' })}
      destroyOnClose
      visible={modalVisible}
      width={618}
      maskClosable={false}
      onCancel={() => handleModalVisible()}
      footer={[
        <Button key="back" size="large" onClick={() => handleModalVisible()}>
          关闭
        </Button>,
      ]}
    >
      <div style={{ width: 530, paddingLeft: 44 }}>
        <FormItem
          label={formatMessage({ id: 'app.mm.productmodel.property.info.name' })}
          colon={false}
        >
          {form.getFieldDecorator('name', {
            initialValue: propertyInfo.name ? propertyInfo.name : undefined,
            rules: [
              {
                required: true,
                message: formatMessage({ id: 'app.mm.productmodel.property.info.name.place' }),
              },
            ],
          })(<Input readOnly />)}
        </FormItem>

        <FormItem
          label={formatMessage({ id: 'app.mm.productmodel.property.info.label' })}
          colon={false}
        >
          {form.getFieldDecorator('label', {
            initialValue: propertyInfo.label ? propertyInfo.label : undefined,
            rules: [
              {
                required: true,
                message: formatMessage({ id: 'app.mm.productmodel.property.info.label.place' }),
              },
            ],
          })(<Input readOnly />)}
        </FormItem>

        <FormItem
          label={formatMessage({ id: 'app.mm.productmodel.property.info.datatype' })}
          colon={false}
        >
          {form.getFieldDecorator('dataTypeId', {
            initialValue: propertyInfo.dataTypeName ? propertyInfo.dataTypeName : undefined,
          })(<Input readOnly />)}
        </FormItem>

        <FormItem
          label={formatMessage({ id: 'app.mm.productmodel.property.info.unit' })}
          colon={false}
        >
          {form.getFieldDecorator('unitId', {
            initialValue: propertyInfo.unitName ? propertyInfo.unitName : undefined,
          })(<Input readOnly />)}
        </FormItem>

        <FormItem
          label={formatMessage({ id: 'app.mm.productmodel.property.info.range' })}
          colon={false}
        >
          <Row>
            <Col span={10}>
              {form.getFieldDecorator('minRange', {
                initialValue: propertyInfo.range ? propertyInfo.range.split('~')[0] : undefined,
              })(<Input readOnly />)}
            </Col>
            <Col span={2} style={{ textAlign: 'center' }}>
              <span>~</span>
            </Col>
            <Col span={10} style={{ marginRight: 0 }}>
              {form.getFieldDecorator('maxRange', {
                initialValue: propertyInfo.range ? propertyInfo.range.split('~')[1] : undefined,
              })(<Input readOnly />)}
            </Col>
          </Row>
        </FormItem>

        <FormItem
          label={formatMessage({ id: 'app.mm.productmodel.property.info.more.desc' })}
          colon={false}
        >
          {form.getFieldDecorator('desc', {
            initialValue: propertyInfo.desc ? propertyInfo.desc : undefined,
            rules: [],
          })(<TextArea readOnly rows={4} />)}
        </FormItem>
      </div>
    </Modal>
  );
});
export default connect(({ productmodel, loading }) => ({
  productmodel,
  loading: loading.models.productmodel,
}))(ViewPropertyForm);
